<template>
  <div id="app">
    <transition name="fade">
      <keep-alive v-if="$route.meta.keepAlive">
        <router-view :style="resize"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" :style="resize"></router-view>
    </transition>
    <footer-menu v-show="$route.meta.showNav && !$route.meta.isTem"/>

    <!-- end -->
    <loading :show="loading"></loading>
  </div>
</template>

<script>
  import FooterMenu from './components/footer/menu'

  export default {
    name: 'App',
    components: {FooterMenu},
    computed: {
      loading () {
        return this.$store.state.pageLoading
      },
      resize () {
        if (this.$route.meta.showNav) {
          return 'margin-bottom: 1.45rem'
        }
        return ''
      }
    },
    methods:{
    },
    created () {

    },
    mounted() {

    }

  }
</script>

<style lang="less">
  @import '~vux/src/styles/reset.less';
  @import '~vux/src/styles/close.less';
  @import '~vux/src/styles/1px.less';
  @import "./common/css/public";
  @import "common/css/animate";

  .fade-enter-active {
    animation-name: fadeIn;
    animation-duration: .5s;
  }
  .mescroll {
    position: fixed;
    top: 0;
    bottom: 0;
    height: auto;
    background: #f0f0f0;
  }

</style>

